<!--充值弹框-->
<template>
  <div v-loading="loading">
    <!-- <Alert type="error">
      <h5>SellOrder.js文件中的扩展SellOrder表的头部信息,你可以在此处定义需要显示的信息,如果需要获取界面的Vue对象属性,参照此扩展组件GridHeaderExtend.vue的说明</h5>
    </Alert> -->
    <!--点击扩展按钮对应的弹出框-->
    <vol-box :model.sync="model" title="充值" :width="700" :height="430">
      <VolForm
        ref="myform"
        :loadKey="loadKey"
        :formFileds="formFileds"
        :formRules="formRules"
        :labelWidth="120"
      ></VolForm>
      <!-- 添加slot槽覆盖footer的按钮，添加新的按钮 -->
      <div slot="footer">
        <Button type="success" @click="getFirstRow">保存</Button>
        <Button type="info" @click="close">关闭</Button>
      </div>
    </vol-box>
  </div>
</template>
<script>
import bus from "@/utilities/bus.js";
import VolForm from "@/components/basic/VolForm.vue";
export default {
  components: {
    VolBox: () => import("@/components/basic/VolBox.vue"),
    VolForm,
  },
  data() {
    return {
      loading: false,
      loadKey: true,
      model: false,
      formFileds: {
        // internal_id_fk:"", //内部编号（流水号）
        account_name: "", //应收帐户名称（表格）
        notesb: "", //备注（表格）
        account_alias: "", //应收账户编号
        account_code: "", //应收账户编号(后端)
        out_order_id: "", //外部订单编号
        customer_name: "", //消费用户姓名
        customer_phone: "", //消费用户手机号
        business_date: new Date(), //营业日期
        type_func: 11, //功能类型（入账(11 充值 12消费 13 退款)，2-转账，3-调整，4-冲账）
        type_record: 3, //入账类型（1-渠道挂账，2-自动挂账，3-手工挂账，4-第三方挂账）
        amount_total: "", //单笔总消费金额
        verify_status: 1, //核销核验（1-未核验，2-已核验）
        notes: "", //备注
        is_valid: null, //是否有效
        creator: "", //操作人
        // timesapn: new Date(), //时间戳
        payment_method: ''
      },
      formRules: [
        //两列的表单，formRules数据格式为:[[{},{}]]
        [
          {
            title: "应收帐户名称",
            field: "account_name",
            type: "text",
            colSize: 6,
            disabled: true,
          },
          {
            title: "应收帐户编号",
            field: "account_alias",
            type: "text",
            colSize: 6,
            disabled: true,
          },
        ],

        [
          {
            title: "备注",
            field: "notesb",
            type: "text",
            colSize: 12,
            disabled: true,
          },
        ],
        [
          {
            required: true, //是否必填
            title: "支付方式",
            field: "payment_method", //需修改
            type: "select",
            data: [
              { key: "现金", value: "现金" },
              { key: "电汇", value: "电汇" },
              { key: "微信", value: "微信" },
              { key: "支付宝", value: "支付宝" },
            ],
            dataKey: "key",
            colSize: 4,
          },

          {
            title: "凭证号",
            field: "out_order_id",
            type: "text",
            required: true, //是否必填
            colSize: 4,
          },

          {
            title: "金额",
            field: "amount_total",
            type: "ZDecimal",
            required: true,
            colSize: 4,
            min: 0.01
          },
        ],
        [
          {
            title: "备注",
            field: "notes",
            type: "textarea",
            colSize: 12,
            required: true,
            placeholder: "请输入备注",
          },
        ],
      ],
    };
  },
  created() {},
  methods: {
    // 循环动态表单
    getFormOption(field) {
      let option;
      this.formRules.forEach((x) => {
        x.forEach((item) => {
          if (item.field == field) {
            option = item;
          }
        });
      });
      return option;
    },
    // 给下拉选择器绑定 onChange 事件
    onInit() {
      let orderTypeOption = this.getFormOption("payment_method");
      orderTypeOption.onChange = (val) => {
        let orderTypeOption = this.getFormOption("payment_method");
        orderTypeOption.data.forEach((item) => {
          if (item.key == val) {
            console.log(item, val);
            this.formFileds.account_name = item.accMain.account_name;
          }
        });
      };
    },
    // 保存按钮
    getFirstRow() {
      console.log("aaa");
      // let that = this;
      this.$refs.myform.validate(() => {
        this.loading = true;
        if (sessionStorage.getItem("user")) {
          this.formFileds.creator = JSON.parse(
            sessionStorage.getItem("user")
          ).userName;
        }

        this.http
          .post("/api/AccountsDetail/AccountsDetailSet", this.formFileds, true)
          .then((x) => {
            console.log("kk", x);
            if (!x.status) {
              this.loading = false;
              this.$message.error(x.message);
              return;
            }
            this.$message.success("操作成功");
            this.model = false;
            this.loading = false;

            bus.$emit("refresh", "abc");
            this.$emit("refreshTables");
          });
      });
    },
    close() {
      this.model = false;
      //  let that= this.$store.getters.data().viewPageTest;
      //  that.$refs.table.load();
    },
    // 重置表单
    resetForm() {
      this.$refs.myform.reset();
    },
  },
};
</script>
